<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米编辑</title>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >
    <script type="text/javascript" src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>

    <style>
        .ver_box li{float: left;width: 28%;list-style: none;}
    </style>
</head>
<body>
<div class="container">
    <h2>商品管理</h2>
    <router-link to="/"  class="btn btn-primary">列表</router-link>
    <router-link to="/add"  class="btn btn-info">添加</router-link>

    <router-view></router-view>
</div>
<template id="add_box">
    <form action="" class="form">
        <div class="form-group">
            <labei>商品名称</labei>
            <input type="text" class="form-control" v-model="goods_name">
        </div>
        <div class="form-group">
            <labei>图片</labei>
            <input type="text" class="form-control" v-model="goods_img">
        </div>
        <div class="form-group" style="clear: both">
            <!-- 按钮样式 -->
            <input type="button" class="btn btn-primary" value="保存" v-on:click="save()"></div>
    </form>
</template>
<template id="list_box">
    <table class="table table-hover">
        <tr>
            <th>id</th>
            <th>商品名称</th>
            <th>商品图片</th>
        </tr>
        <tr v-for="(info,index) in goods_list">
            <td>{{index+1}}</td>
            <td>{{info.goods_name}}</td>
            <td>{{info.goods_img}}</td>
        </tr>
    </table>
</template>
<!--<template id="edit_box">
    &lt;!&ndash; 必须要放在一个容器里面 &ndash;&gt;
    <div>
        <form action="" class="form">
            &lt;!&ndash; 怎么获取当前的商品信息呢?
            怎么获取路由的参数？
             &ndash;&gt;
            商品名称 <input type="text" v-model='info.goods_name'>
            商品价格 <input type="text" v-model='info.goods_price'>
            <br>
            <lable>版本: </lable>

            <a v-on:click="add_version()" class="btn btn-info">添加版本</a>
            <ul class="ver_box">
                <li v-for="(ver_info,index) in info.ver_list">
                    版本{{index+1}}：   <a v-on:click="ver_delete(index)" class="btn btn-info">删除版本</a>
                    <br>
                    <input   type="text" v-model="ver_info.ver_name"><br>
                    价格: <br>
                    <input   type="text" v-model="ver_info.price">
                    <br>
                    <a v-on:click="add_color(index)" class="btn btn-info">添加颜色</a>
                    <div v-for="(color_info,index) in ver_info.color_list">
                        颜色{{index+1}}： <a v-on:click="color_delete(ver_info,index)" class="btn btn-info">删除颜色</a>
                        <br>
                        <input   type="text" v-model="color_info.color_name">
                        <br>
                        库存
                        <br>
                        <input   type="text" v-model="color_info.sku"></div>
                </li>
            </ul>
            <input class="btn btn-primary" type="button" @click="update()" value="修改">
        </form>
    </div>

</template>-->

<script type="text/javascript">
    var router = new VueRouter({
        routes:[
            {
                path:'/add',
                component:{
                    data(){
                        return {
                            goods_name:'',//商品名称
                            goods_img:'',//商品图片
                            title:'',
                            goods_list:[],
                        }
                    },
                    methods: {
                        save: function () {
                            // 保存信息的方法
                            var goods_name = this.goods_name
                            var goods_img = this.goods_img
                            var title = this.title
                            // es6 对象属性和值同名的简化
                            this.$parent.goods_list.push({
                                goods_name,
                                goods_img,
                                title
                            })

                            localStorage.setItem('goods_list', JSON.stringify(this.$parent.goods_list))
                            this.$router.push('/') //跳转

                        },

                    },
                    template:'#add_box'
                } //组件
            },
            {
                path:'/',
                component:{  //单个子组件相关属性定义的地方
                    template:'#list_box',
                    data(){
                        return{
                            goods_list:[], //商品列表
                        }
                    },
                    created(){
                        this.goods_list = JSON.parse(localStorage.getItem('goods_list'))
                    },
                    methods:{
                        delete_goods:function (index) {
                            this.goods_list.splice(index,1);
                            localStorage.setItem('goods_list', JSON.stringify(this.goods_list))
                            this.$router.push('/') //跳转
                        }}
                } //组件

            },

        ]
    })
    new Vue({
        router,
        el:".container", //告诉Vue我们的视图层在哪里
        data:{//定义模型层的相关数据
            goods_list:[]
        },
        created(){
            this.goods_list = JSON.parse(localStorage.getItem('goods_list'))
        }

    })
</script>
</body>
</html>